<template>
  <div class="scene">
    <div class="block">
      <span v-show="show1" class="span1 word">大家一定要理性健康消费啊<br/>冲动消费 攀比消费是不可取的啊<br/>我们要学会理财而不是散财哦</span>
      <span v-show="show1" class="span2 word">同时我们要警惕信贷陷阱<br/>一旦陷入 不要沉迷<br/>请马上报警！！！</span>
      <el-button v-show="show2" class="button" v-on:click="A">退出情景模拟</el-button>
    </div>
  </div>
</template>

<script>
export default {
  data : function() {
    return {
      show1: true,
      show2: false,
    }
  },
  mounted() {
    this.load();
  },
  methods: {
    load() {
      setTimeout(() => {this.show1 = false}, 6000)
      setTimeout(() => {this.show2 = true}, 6000)
    },
    A() {
      this.$router.push("/learn/scenechoose")
    },
  }
}
</script>

<style scoped>
.scene{
  width: 100%;
  min-height: 666px;
}

.block{
  width: 1080px;
  height: 607.5px;
  top: 30px;
  position: relative;
  left: 50%;
  transform: translate(-50%, 0%);
  background-color: black;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
}

.button {
  height: 60px;
  margin-top: 270px;
  margin-left: 50px;
  font-size: 25px;
  font-weight: bold;
  color: rgba(249, 191, 75, 1);
  background: rgba(53, 78, 102, 1);
}

.word {
  font-size: 50px;
  font-weight: bold;
  color: rgba(249, 191, 75, 0);
  position: absolute;
  width: 1080px;
  left: 50%;
  transform: translate(-50%, 0%);
  animation-duration: 3s;
  animation-name: move1;
}

.span1{
  top: 180px;
}

.span2{
  top: 180px;
  animation-delay: 3s;
}

@keyframes move1 {
  0% {
    color: rgba(249, 191, 75, 0);
  }
  50% {
    color: rgba(249, 191, 75, 1);
  }
  80% {
    color: rgba(249, 191, 75, 1);
  }
  100% {
    color: rgba(249, 191, 75, 0);
  }
}
</style>